<template>
  <el-dialog :visible.sync="dialogVisible" width="384px" :close-on-click-modal="false" :before-close="handleClose">
    <div class="content">
      <div class="logo">
        <!-- <el-image style=" height: 60px" :src="logo" alt="404" fit="fit" /> -->
      </div>
      <div class="form">
        <!-- 账号密码登录 -->
        <div v-if="status == 1">
          <div class="from-type">
            <div>账号密码登录</div>
            <span @click="status = 2">验证码快捷登录<i class="iconfont icon-xiangyoujiantou" /></span>
          </div>
          <el-form ref="form" :model="form" :rules="rules">
            <el-form-item prop="account">
              <el-input v-model="form.account" placeholder="手机号 / 邮箱" />
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="form.password" placeholder="密码" show-password />
            </el-form-item>
            <el-button class="login" type="primary" size="medium" :loading="loading" @click="login">{{ !loading ? '登录' :
              '登录中'
            }}</el-button>
            <div class="other-item">
              <div @click="status = 3">忘记密码？</div>
            </div>
          </el-form>
        </div>
        <!-- 验证码快捷登录 -->
        <div v-else-if="status == 2">
          <div class="from-type">
            <div>验证码快捷登录</div>
            <span @click="status = 1">账户密码登录<i class="iconfont icon-xiangyoujiantou" /></span>
          </div>
          <el-form ref="form" :model="form" :rules="rules">
            <el-form-item prop="account">
              <el-input v-model="form.account" placeholder="手机号 / 邮箱" />
            </el-form-item>
            <el-form-item prop="code">
              <div class="code">
                <el-input v-model="form.code" class="code-input" placeholder="验证码" />
                <el-button class="code-btn" size="medium" @click="getVerifyCode">{{ buttonName }}</el-button>
              </div>
            </el-form-item>
            <el-button class="login" type="primary" size="medium" :loading="loading" @click="LogInToregister">{{ !loading
              ? '登录 / 注册' : '登录 / 注册中'
            }}</el-button>
            <!-- <div class="other-item">
              <div>忘记密码？</div>
            </div> -->
          </el-form>
        </div>
        <!-- 通过手机/邮箱重设密码 -->
        <div v-else-if="status == 3">
          <div class="from-type">
            <div>通过手机/邮箱重设密码</div>
            <!-- <span @click="status=1">账户密码登录<i class="iconfont icon-xiangyoujiantou"></i></span> -->
          </div>
          <el-form ref="form" :model="form" :rules="rules">
            <el-form-item prop="account">
              <el-input v-model="form.account" placeholder="手机号 / 邮箱" />
            </el-form-item>
            <el-form-item prop="code">
              <div class="code">
                <el-input v-model="form.code" class="code-input" placeholder="验证码" />
                <el-button class="code-btn" size="medium" @click="getVerifyCode">{{ buttonName }}</el-button>
              </div>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="form.password" placeholder="新密码" show-password />
            </el-form-item>
            <el-button class="login" type="primary" size="medium" :loading="loading" @click="resetPassword">{{ !loading ?
              '重设密码' : '重设密码中'
            }}</el-button>
            <div class="other-item">
              <div @click="status = 1">想起密码？</div>
            </div>
          </el-form>
        </div>
      </div>
      <div v-if="status != 3" class="other">
        <!-- <el-divider>第三方登录</el-divider> -->
        <ul>
          <a :href="weChatUrl">
            <li><i class="iconfont icon-weixin" /></li>
          </a>
          <li><i class="iconfont icon-qq" /></li>
          <li><i class="iconfont icon-xinlangweibo" /></li>
          <li><i class="iconfont icon-shejiaotubiao-09" /> </li>
          <li><i class="iconfont icon-weiruan" /></li>
          <a :href="githubUrl">
            <li><i class="iconfont icon-github" /></li>
          </a>
        </ul>
      </div>
      <div v-if="status != 3" class="from-reading">
        登录注册即代表同意xx<span>《用户协议》</span>和<span>《隐私协议》</span>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { validMobile, validEmail, validPassword } from '@/utils/validate'
import { getVerifyCode } from '@/api/news/pc-web/verifyCode'
import { quick, login, quickUpdatePassword, gitHubLogin, weChatLogin } from '@/api/news/pc-web/user'
import { mapActions } from 'vuex'
export default {
  name: 'Login',
  components: {},
  data() {
    var validAccount = (rule, value, callback) => {
      if (!validMobile(value) && !validEmail(value)) return callback(new Error('请输入有效的账号'))
      callback()
    }
    var validPasswordd = (rule, value, callback) => {
      if (!validPassword(value)) return callback(new Error('密码只能由数字和字母组成'))
      callback()
    }
    return {
      time: 60,
      isDisabled: false,
      buttonName: '获取验证码',
      githubUrl: 'https://github.com/login/oauth/authorize?client_id=88f028142403410abfef&redirect_uri=http://127.0.0.1:8888/dashboard',
      weChatUrl: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd4a837c38b866355&redirect_uri=http://127.0.0.1:8888/dashboard&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect',
      status: 1,
      dialogVisible: true,
      loading: false,
      logo: require('@/assets/common/logo1.png'),
      form: {
        account: '',
        password: '',
        code: ''
      },
      rules: {
        account: [
          // { required: true, message: '请输入手机号码或邮箱账号', trigger: 'blur' },
          { required: true, message: ' ', trigger: 'blur' },
          { validator: validAccount, trigger: 'blur' }
        ],
        password: [
          // { required: true, message: '请输入密码', trigger: 'blur' },
          { required: true, message: ' ', trigger: 'blur' },
          { min: 6, message: '密码最小长度为6个字符', trigger: 'blur' },
          { validator: validPasswordd, trigger: 'blur' }
        ],
        code: [
          { required: true, message: ' ', trigger: 'blur' }
        ]
      }
    }
  },
  created() { },
  mounted() {
    // console.log(window.location.href.indexOf("code=") !==-1);判断是否否找到code=
    if (window.location.href.indexOf('code=') == -1) {

    } else {
      //  this.gitHubLogin()
      // this.weChatLogin()
    }
  },
  methods: {
    ...mapActions(['user/pclogin', 'user/quicklogin']),
    async weChatLogin() {
      const weChatCode = window.location.href.split('?code=')[1].split('&')
      const res = await weChatLogin({ code: weChatCode[0] })
      console.log(res)
      this.$message.success('WeChat登录成功')
    },
    async gitHubLogin() {
      var str = window.location.href.substr(window.location.href.indexOf('code=') + 5)
      var Code = str.substr()
      const res = await gitHubLogin({ code: Code })
      console.log(res)
      this.$message.success('gitHub登录成功')
    },
    // 获取验证码
    async getVerifyCode() {
      await getVerifyCode({ account: this.form.account })
      this.sendCode()
      this.$message.success('验证码发送成功')
    },
    // 关闭对话框
    handleClose(done) {
      done()
      this.$emit('close')
      this.form = {}
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     done();
      //   })
      //   .catch(_ => {});
    },
    // 账号密码登录
    async login() {
      this.$refs.form.validate(async(isOK) => {
        if (isOK) {
          await this['user/pclogin'](this.form)

          this.$message.success('登录成功')
          this.dialogVisible = false
          this.form = {}
        }
      })
    },

    // 登录或注册
    async LogInToregister() {
      this.$refs.form.validate(async(isOK) => {
        if (isOK) {
          // await quick(this.form)
          await this['user/quicklogin'](this.form)
          this.$message.success('登录成功')
          this.dialogVisible = false
          this.form = {}
        }
      })
    },
    // 重设密码
    async resetPassword() {
      this.$refs.form.validate(async(isOK) => {
        if (isOK) {
          await quickUpdatePassword(this.form)
          this.$message.success('重设密码成功,请使用您设置的新密码登录')
          this.status = 1
          this.form = {}
        }
      })
    },

    sendCode() {
      const that = this
      that.time = 60
      that.isDisabled = true
      const interval = window.setInterval(function() {
        that.buttonName = that.time + '秒后重新发送'
        --that.time

        console.log(that.time)
        if (that.time < 0) {
          that.buttonName = '重新发送'
          // that.time = 60
          that.isDisabled = false
          window.clearInterval(interval)
        }
      }, 500)
    }

    // login(){
    //   this.$refs.form.validate(async (isOK) => {
    //   if (isOK) {
    //     console.log('验证成功');
    //     this.loading = true
    //    setTimeout(() => {
    //       this.loading = false
    //    }, 1000);
    //     // this.dialogVisible=!this.dialogVisible
    //   } else {
    //   }
    // });
    // }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
  box-sizing: border-box;
  border-radius: 16px;

  .el-dialog__header {
    padding: 5px;
  }

  .el-dialog__body {
    padding: 0px 32px 32px;
  }

  .el-icon-close {
    font-size: 18px;
  }
}

.logo {
  margin: 30px 0px;
}

.form {
  .from-type {
    display: flex;
    justify-content: space-between;
    height: 20px;
    line-height: 20px;

    div:nth-child(1) {
      font-size: 20px;
      font-weight: 500;
      border-left: 3px solid #328BF9;
      padding-left: 5px;
    }

    span {
      cursor: pointer;
      color: #328BF9;

      .icon-xiangyoujiantou {
        font-size: 13px;
      }
    }

  }

  .el-form {
    margin-top: 40px;

    ::v-deep .el-input__inner {
      border-radius: 8px;
    }

    ::v-deep .el-form-item {
      margin-bottom: 16px;
    }

    .code {
      display: flex;
      justify-content: space-between;
    }

    .code-input {
      margin-right: 15px;
      // display: block;
      //  width: 65%;
      // margin: 8px 0px 16px;
    }

    .code-btn {
      //  width: 30%;
      // margin: 8px 0px 16px;
    }

    .login {
      width: 100%;
      margin: 8px 0px 16px;
    }

    // .el-button{
    //  width: 100%;
    //  margin: 8px 0px 16px;
    // }
    .el-button--medium {
      border-radius: 8px;
    }
  }

  .other-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;

    div {
      cursor: pointer;
    }

    // height: 40px;
    // line-height: 40px;
  }
}

.other {
  margin-bottom: 20px;

  .el-divider__text,
  .el-link {
    font-weight: 400;
    font-size: 12px;
  }

  .el-divider--horizontal {
    margin: 20px 0;
  }

  ul {
    display: flex;
    justify-content: space-evenly;
    list-style: none;

    li:hover {
      border: 1px solid #25abef;
    }

    li {
      display: flex;
      align-items: center;
      justify-content: center;
      // cursor: pointer;
      width: 33px;
      height: 33px;
      border: 1px solid #e5e7e8;
      border-radius: 100px;
    }
  }

  .iconfont {
    font-size: 18px;
  }

  .icon-weixin {
    color: rgb(74, 221, 51);
  }

  .icon-qq {
    //  font-size:16px;
    color: rgb(87, 139, 222);
  }

  .icon-xinlangweibo {
    color: rgb(244, 94, 75);
  }

  .icon-shejiaotubiao-09 {
    color: rgb(93, 140, 241);
  }

  .icon-weiruan {
    color: rgb(93, 140, 241);
  }

  .icon-github {
    color: rgb(10, 24, 54);
  }
}

.from-reading {
  font-size: 12px;
  text-align: center;

  span {
    cursor: pointer;
    color: #328BF9;
  }
}
</style>
